<template>
	<view class="terminal-state">
		<u-toast ref="uToast"></u-toast>
		<u-no-network></u-no-network>

		<u-tabs :list="list" name="name" :is-scroll="false" :current="current" @change="tabChange"></u-tabs>
		<!-- <u-dropdown ref="uDropdown" class="terminal-state__filt u-m-r-10" height="60">
			<u-dropdown-item title="筛选">
				<view class="slot-content">
					<view class="u-text-center u-content-color u-m-t-20 u-m-b-20">其他自定义内容</view>
					<u-button type="primary" @click="closeDropdown">确定</u-button>
				</view>
			</u-dropdown-item>

		</u-dropdown> -->
		<view class="flex terminal-state__header">
			<view class="u-padding-10 terminal-state__filt u-m-r-10" @click="triggleDrop()">筛选 <u-icon
					name="arrow-down-fill" size="28"></u-icon></view>

			<u-search placeholder="请输入终端或机器sn号" v-model="requstBody.SN" shape="square" bg-color="#f6f6f6"
				:show-action="true" @search="goSearch" @custom="goSearch"></u-search>


		</view>

		<view class="u-padding-20">
			商户总数：{{totalNum}}
		</view>
		<scroll-view class="home__grid-group mt-20" scroll-y @scrolltolower="onScrolltolower">
			<view>
				<view class="terminal-state__item " v-for="(item,index) in terminalList" :key="index">
					<view class="flex align-center">
						<view class="card__icon">
							<u-image :src="thumb" width="40" height="40" class=""></u-image>
						</view>

						<view class="">
							<view class="">
								考核剩余天数：{{item.assessEndTimeStr}}
							</view>
							<view class="">
								SN：{{item.sn}}
							</view>
						</view>


					</view>
					<view class="u-margin-left-80 u-margin-top-20">
						<view class="u-m-t-10">
							服务商名称:{{item.agentName}}
						</view>
						<view class="u-m-t-10">
							服务商编号:{{item.agentNo}}
						</view>
						<view class="u-m-t-10">
							到期时间:{{item.endTime}}
						</view>
					</view>

				</view>
				<u-loadmore :status="status" />
			</view>
		</scroll-view>
		<u-popup v-model="showPopup" mode="top" class="pop_filter">
			<view>
				<view class="pop_filter__title u-margin-left-20">
					终端绑定状态
				</view>
				<view class="flex u-margin-top-20 u-margin-bottom-20">
					<view class="pop_filter__btn " :class="{'pop_filter__select':checked===index}"
						v-for="(item,index) in bindStates" :key="index" @click="selectBtn(
					'1',index)">
						{{item.label}}
					</view>
				</view>
				<view class="pop_filter__title u-margin-left-20">
					未激活状态
				</view>
				<view class="flex u-margin-top-20 u-margin-bottom-20">
					<view class="pop_filter__btn" v-for="(item,index) in inactiveStates" :key="index"
						:class="{'pop_filter__select':inactiveChecked===index}" @click="selectBtn('2',index)">
						{{item.label}}
					</view>
				</view>
				<view class="pop_filter__title u-margin-left-20">
					考核剩余天数
				</view>
				<u-input v-model="requstBody.accessEndDays" type="number" :border="false" placeholder="输入不大于180的数字"
					class="pop_filter__input" />
				<view class="pop_filter__title u-margin-left-20">
					服务商名称
				</view>
				<u-input v-model="requstBody.agentNoOrName" type="text" :border="false" placeholder="输入服务商全部或部分名称"
					class="pop_filter__input" />
				<view class="flex u-margin-20 u-padding-top-20">
					<u-button type="primary" class="flex-1 u-m-r-15" :custom-style="customCancelStyle"
						hover-class="false" @click="cancel()">重置</u-button>
					<u-button type="primary" class="flex-1 u-margin-left-15" :custom-style="customSubmitStyle"
						hover-class="false" @click="submitFilter()">确定</u-button>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				checked: null,
				inactiveChecked: null,
				customCancelStyle: {
					// 注意驼峰命名，并且值必须用引号包括，因为这是对象
					backgroundColor: '#f6f6f6',
					color: 'black'

				},
				customSubmitStyle: {
					// 注意驼峰命名，并且值必须用引号包括，因为这是对象
					backgroundColor: '#9D60FF',
					color: 'white'
				},
				src: "/static/image/home/icon_scan.png",
				thumb: "/static/image/home/icon_terminal_status.png",
				pageNo: 1,
				pageSize: "10",
				requstBody: {
					activityType: "expire_reduce", //0 expire_reduce 1 fake
					bindStatus: "",
					assessStatus: "",
					accessEndDays: "",
					agentNoOrName: "",
					SN: ""
				},
				terminalList: [],
				scrollTop: 0,
				status: "loadmore",
				list: [{
					name: '未激活统计',
					value: 'expire_reduce'
				}, {
					name: '伪激活统计',
					value: 'fake'
				}],
				current: 0,
				totalNum: "",

				value1: 1,
				value2: 2,
				bindStates: [{
						label: '不限',
						value: '',
					},
					{
						label: '已绑定',
						value: '2',
					},
					{
						label: '未绑定',
						value: '1',
					}
				],
				inactiveStates: [{
						label: '考核中',
						value: 'fail',
					},
					{
						label: '未激活',
						value: 'init',
					},
				],
				showPopup: false
			}
		},
		onReachBottom() {
			this.onScrolltolower();
		},
		mounted() {
			this.terminalInfoQueryIssueList();
		},
		methods: {
			goSearch(value) {
				console.log("value=" + value)
				const _that = this;
				_that.requstBody.agentNoOrName = value;
				_that.pageNo = 1;
				_that.terminalList = [];
				_that.terminalInfoQueryIssueList();
			},

			selectBtn(type, index) {
				if (type == "1") {
					this.checked = index;
				} else {
					this.inactiveChecked = index;
				}

			},
			cancel() {
				const _that = this;
				_that.requstBody.bindStatus = "";
				_that.requstBody.inactiveStates = "";
				_that.requstBody.accessEndDays = "";
				_that.requstBody.SN = "";
				_that.checked = null;
				_that.inactiveChecked = null;

			},
			submitFilter() {
				const _that = this;
				if (_that.checked) {
					_that.requstBody.bindStatus = _that.bindStates[_that.checked].value;
				}
				if (_that.inactiveChecked) {
					_that.requstBody.inactiveStates = _that.inactiveStates[_that.inactiveChecked].value;
				}

				_that.pageNo = 1;
				_that.terminalList = [];
				this.showPopup = false;
				_that.terminalInfoQueryIssueList();
			},
			triggleDrop() {

				this.showPopup = !this.showPopup;

			},
			closeDropdown() {
				this.$refs.uDropdown.close();
			},
			tabChange(index) {
				const _that = this;
				console.log("index=" + index)
				_that.current = index;
				_that.requstBody.bindStatus = "";
				_that.requstBody.inactiveStates = "";
				_that.requstBody.accessEndDays = "";
				_that.requstBody.SN = "";
				_that.checked = null;
				_that.inactiveChecked = null;
				_that.pageNo = 1;
				_that.terminalList = [];

				_that.list.find((data, _index) => {

					if (_that.current == _index) {
						_that.requstBody.activityType = data.value;
					}
				});
				console.log("index=" + JSON.stringify(_that.requstBody))
				_that.terminalInfoQueryIssueList();
			},
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
			onScrolltolower() {
				this.status = "loading";
				this.terminalInfoQueryIssueList();
			},
			terminalInfoQueryIssueList() {

				let _that = this;
				_that.$zx.terminal_api.terminalActivityAndFakeStat(this.pageNo, this.pageSize, this.requstBody).then((
					data) => {

					_that.terminalList = _that.terminalList.concat(data.list);
					_that.totalNum = data.totalNum;

					if (data.length !== 0) {
						this.status = "loadmore";
						this.pageNo += 1;
					} else {
						this.status = "nomore";
					}
				});
			},


		},
	}
</script>

<style scoped lang="scss">
	.terminal-state {
		&__header {
			padding: 20rpx;
			background-color: white;
			position: relative;
		}

		&__item {
			background-color: white;
			border-radius: 20rpx;
			margin: 10rpx 20rpx;
			padding: 20rpx;
		}

		&__filt {
			// width: 100rpx;
			background-color: #f6f6f6;
			border-radius: 10rpx;
		}
	}

	.pop_filter {
		position: absolute;
		top: 180rpx;

		&__title {
			font-weight: bold;
			height: 60rpx;
			line-height: 60rpx;
		}

		&__btn {
			background-color: #f6f6f6;
			width: 180rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			margin: 0 20rpx;
			border-radius: 10rpx;
		}

		&__input {
			background-color: #f6f6f6;
			margin: 0 20rpx;
			border-radius: 10rpx;

		}

		&__select {
			background-color: #F1E8FF;
			color: #9D60FF;
			background-image: url("../../../static/image/home/icon_filter_checked.png");
			background-position: right bottom;
			background-repeat: no-repeat;
		}
	}

	.card__icon {
		background-color: #f6f6f6;
		padding: 15rpx;
		margin-right: 20rpx;
		border-radius: 20rpx;
	}
</style>